/*
 * @Author: your name
 * @Date: 2022-03-31 18:49:13
 * @LastEditTime: 2022-04-07 09:19:36
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\table\tabel.jsx
 */
import React, { useState } from 'react';
import { Row, Table, Pagination, ConfigProvider, Tag } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import {
    DeleteOutlined,
} from '@ant-design/icons';
import './tabel.css'
import Accessorymodal from '../accessoryModal/accessoryModal'
import Modify from '../table/modify'

const Tabel = () => {

    //文件模态框
    const initialState = [
        {
            key: '1',
            audit: true,
            client: '罗翔',
            relation: '西湖区',
            contact: '张三',
            InAddEx: '收支',
            IncomeCategory: '合同续费',
            IncomeMoney: '120',
            remark: '123456789',
            IncomeDate: '2022-03-31',
            IncomeAccount: '',
            manager: '',
            salesman: '超级管理员',
            inputime: '2022-03-31 10:11:11',
            accessory: '无附件',

        },
        {
            key: '2',
            audit: false,
            client: 32,
            relation: '西湖区',
            contact: '',
            InAddEx: '',
            IncomeCategory: '',
            IncomeMoney: '',
            remark: '',
            IncomeDate: '',
            IncomeAccount: '',
            manager: '',
            salesman: '',
            inputime: '',
            accessory: '有附件',

        },
    ];
    const [dataSource, setDataSource] = useState(initialState);
    const columns = [
        {
            title: '审核',
            dataIndex: 'audit',
            key: 'audit',
            fixed: 'left',
            width: 70,
            render: (audit, dataItem) => {
                // console.log(dataItem);
                return audit ? <Tag color="#009966" onClick={() => handleAudit(audit, dataItem)}>已审核</Tag> : <Tag color="#E0405A" onClick={() => handleAudit(audit, dataItem)}>未审核</Tag>
            },
        },
        {
            title: '客户名称',
            dataIndex: 'client',
            key: 'client',
            fixed: 'left',
            width: 80,
            render: client => {
                return client
            },
        },
        {
            title: '关联',
            dataIndex: 'relation',
            key: 'relation',
            width: 150,
        },
        {
            title: '联系人',
            dataIndex: 'contact',
            key: 'contact',
            width: 65,

        },
        {
            title: '收入_支出',
            dataIndex: 'InAddEx',
            key: 'InAddEx',
            width: 85,

        },
        {
            title: '收支类别',
            dataIndex: 'IncomeCategory',
            key: 'IncomeCategory',
            width: 85,

        },
        {
            title: '收支金额',
            dataIndex: 'IncomeMoney',
            key: 'IncomeMoney',
            width: 85,

        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 70,

        },
        {
            title: '收支日期',
            dataIndex: 'IncomeDate',
            key: 'IncomeDate',
            width: 95,

        },
        {
            title: '资金账户',
            dataIndex: 'IncomeAccount',
            key: 'IncomeAccount',
            width: 85,

        },
        {
            title: '经办人',
            dataIndex: 'manager',
            key: 'manager',
            width: 70,


        },
        {
            title: '业务员',
            dataIndex: 'salesman',
            key: 'salesman',
            width: 70,

        },
        {
            title: '录入时间',
            dataIndex: 'inputime',
            key: 'inputime',
            width: 95,

        },
        {
            title: '附件',
            dataIndex: 'accessory',
            key: 'accessory',
            width: 80,
            render: accessory => {
                return <Accessorymodal accessory={accessory} />
            }

        },
        {
            title: '管理',
            // dataIndex: 'administer',
            key: 'administer',
            fixed: 'right',
            width: 140,
            render: data => {
                for (let key in data) {
                    return <>
                        <Modify />
                        <Tag icon={<DeleteOutlined />} color="#cd201f" >
                            删除
                        </Tag>
                    </>
                }
            }
        },
    ];

    //修改审核状态
    const handleAudit = (a, d) => {
        const newData = dataSource.map(item => {
            if (d.key === item.key) {
                item.audit = !a  
            } return item
        })
        setDataSource(newData)
    }
    return (
        <>

            <Table 
            dataSource={dataSource} 
            columns={columns} 
            pagination={false} 
            scroll={{ x: 'calc(700px + 50%)', y: 240 }} 
            />

            <Row justify='center' className='cash'>
                已审核结余统计: 140 元&nbsp;&nbsp;总收入: 140 元&nbsp;&nbsp;总支出： 0 元
            </Row>
            <Row justify='center' className='all-cash'>
                所有(含已审核+未审核)结余统计：&nbsp;&nbsp;总收入: 140 元&nbsp;&nbsp;总支出： 0 元
            </Row>

            <Row justify='end'>
                <ConfigProvider locale={zhCN}>
                    <Pagination
                        total={20}
                        showSizeChanger
                        showQuickJumper
                        showTotal={total => `总数 ${total} 条`}
                        defaultPageSize='5'
                        pageSizeOptions={['5', '10', '15', '20']}
                    />
                </ConfigProvider>
            </Row>

        </>
    );
}

export default Tabel;
